import React from 'react';

// 这些组件我们将在后续任务中创建
import { LLMConfigTab } from './tabs/LLMConfigTab';
import { MCPConfigTab } from './tabs/MCPConfigTab';
import { ImportExportTab } from './tabs/ImportExportTab';
import { AdvancedTab } from './tabs/AdvancedTab';

// 配置状态接口
export interface ConfigState {
  llm: {
    provider: 'openai' | 'anthropic' | 'openrouter' | 'openai-compatible';
    apiKey: string;
    modelName: string;
    options: {
      baseURL: string;
    };
  };
  mcp: {
    configs: any[];
  };
  advanced: {
    theme: 'light' | 'dark';
    language: 'zh' | 'en';
    autoSave: boolean;
  };
  ui: {
    activeTab: string;
    isLoading: boolean;
    validationResults: Record<string, any>;
  };
}

interface TabContentRendererProps {
  activeTab: string;
  config: ConfigState;
  onConfigChange: (config: Partial<ConfigState>) => void;
  onConfigImported?: (result: any) => void;
}

export const TabContentRenderer: React.FC<TabContentRendererProps> = ({
  activeTab,
  config,
  onConfigChange,
  onConfigImported
}) => {
  const handleLLMConfigChange = (llmConfig: ConfigState['llm']) => {
    onConfigChange({ llm: llmConfig });
  };

  const handleMCPConfigChange = (mcpConfig: ConfigState['mcp']) => {
    onConfigChange({ mcp: mcpConfig });
  };

  const handleAdvancedConfigChange = (advancedConfig: ConfigState['advanced']) => {
    onConfigChange({ advanced: advancedConfig });
  };

  const handleUIStateChange = (uiState: Partial<ConfigState['ui']>) => {
    onConfigChange({ ui: { ...config.ui, ...uiState } });
  };

  switch (activeTab) {
    case 'llm-config':
      return (
        <LLMConfigTab
          config={config.llm}
          validationResult={config.ui.validationResults.llm}
          isLoading={config.ui.isLoading}
          onChange={handleLLMConfigChange}
          onValidationChange={(result) => 
            handleUIStateChange({ 
              validationResults: { 
                ...config.ui.validationResults, 
                llm: result 
              } 
            })
          }
          onLoadingChange={(isLoading) => handleUIStateChange({ isLoading })}
        />
      );

    case 'mcp-config':
      return (
        <MCPConfigTab
          config={config.mcp}
          onChange={handleMCPConfigChange}
        />
      );

    case 'import-export':
      return (
        <ImportExportTab
          onConfigImported={onConfigImported || (() => {})}
          disabled={config.ui.isLoading}
        />
      );

    case 'advanced':
      return (
        <AdvancedTab
          config={config.advanced}
          onChange={handleAdvancedConfigChange}
        />
      );

    default:
      return (
        <div 
          style={{
            textAlign: 'center',
            padding: '48px 24px',
            color: '#8c8c8c',
            fontFamily: 'var(--eko-font-family-chinese)',
          }}
        >
          <h3>页面未找到</h3>
          <p>请选择左侧菜单中的配置选项</p>
        </div>
      );
  }
};